<template>
  <el-dialog :title="title" :visible="isShow" width="630px" @close="closeFn">
    <el-form ref="addForm" :rules="rules" :model="addForm">
      <el-form-item prop="name" label="点位名称：" label-width="150px">
        <el-input
          style="width: 85%"
          v-model="addForm.name"
          placeholder="请输入"
          maxlength="15"
          show-word-limit
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="regionId" label="所在区域：" label-width="150px">
        <el-select
          style="width: 85%"
          v-model="addForm.regionId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in region"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="businessId" label="所属商圈：" label-width="150px">
        <el-select
          style="width: 85%"
          v-model="addForm.businessId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in businessType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="ownerId" label="归属合作商：" label-width="150px">
        <el-select
          style="width: 85%"
          @change="partnerChangeFn"
          v-model="addForm.ownerId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in partner"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="详细地址:"
        label-width="150px"
        prop="addressSelections"
      >
        <el-cascader
          :options="addressData"
          :disabled="false"
          @change="handleAddress"
          style="width: 85%"
          :props="defaultProps"
          v-model="addForm.addressSelections"
          placeholder="请选择"
        ></el-cascader>
      </el-form-item>
      <el-form-item label-width="150px" prop="address">
        <el-input
          style="width: 85%"
          type="textarea"
          :rows="4"
          placeholder="请输入详细地址"
          maxlength="60"
          show-word-limit
          v-model="addForm.address"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-button
            class="btn cancel"
            @click="closeFn"
            style="margin-right: 20px"
            >取消</el-button
          >
          <el-button class="btn confirm" type="primary" @click="submit"
            >确认</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  searchRegionApi,
  getBusinessTypeApi,
  searchPartnerApi,
  addNodeApi,
  editNodeApi,
} from "@/api/node";
import { regionData, TextToCode } from "element-china-area-data";
export default {
  props: {
    isShow: Boolean,
    title: String,
    nodeNow: Object,
  },
  data() {
    return {
      addForm: {
        addr: "",
        areaCode: "",
        businessId: "",
        createUserId: 1,
        name: "",
        address: "",
        ownerId: "",
        ownerName: "",
        regionId: "",
        addressSelections: [],
      },
      searchForm: {
        pageIndex: 1,
        pageSize: 10000,
      },
      defaultProps: {
        label: "label",
        value: "label",
      },
      region: [],
      addressData: regionData,
      businessType: [],
      partner: [],
      rules: {
        name: [{ required: true, message: "请输入点位名称", trigger: "blur" }],
        regionId: [
          { required: true, message: "请选择所在区域", trigger: "blur" },
        ],
        regionId: [
          { required: true, message: "请选择所在区域", trigger: "blur" },
        ],
        businessId: [
          { required: true, message: "请选择所属商圈", trigger: "blur" },
        ],
        ownerId: [
          { required: true, message: "请选择归属合作商", trigger: "blur" },
        ],
        addressSelections: [
          { required: true, message: "请选择省市区", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getRegion();
    this.getBusinessType();
    this.getPartner();
    if(this.title === '修改点位'){
      this.addForm = {...this.nodeNow}
    }
  },
  methods: {
    closeFn() {
      this.$refs.addForm.resetFields();
      this.addForm = {
        addr: "",
        areaCode: "",
        businessId: "",
        createUserId: 1,
        name: "",
        address: "",
        ownerId: "",
        ownerName: "",
        regionId: "",
        addressSelections: [],
      },
        this.$emit("update:isShow", false);
    },

    async getRegion() {
      const res = await searchRegionApi(this.searchForm);
      this.region = res.currentPageRecords;
    },

    async getBusinessType() {
      const res = await getBusinessTypeApi();
      this.businessType = res;
    },

    async getPartner() {
      const res = await searchPartnerApi(this.searchForm);
      this.partner = res.currentPageRecords;
    },

    partnerChangeFn(val) {
      this.partner.forEach((item) => {
        if (item.id === val) {
          this.addForm.ownerName = item.name;
        }
      });
    },
    handleAddress(val) {
      this.addForm.areaCode = TextToCode[val[0]][val[1]][val[2]].code;
      this.addForm.addr = val.join("-");
    },
    submit() {
      this.$refs.addForm.validate(async (pass) => {
        if (pass) {
          if (this.title === "新增点位") {
            this.addForm.addr = this.addForm.addr + "-" + this.addForm.address;
            await addNodeApi(this.addForm);
            this.$message.success("添加点位成功");
            this.closeFn();
            this.$emit("searchNode");
          } else {
            this.addForm.addr = this.addForm.addr.split('-').splice(0,3).join('-') + "-" + this.addForm.address;
            await editNodeApi(this.addForm.id, this.addForm);
            this.$message.success("修改成功");
            this.closeFn();
            this.$emit("searchNode");
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  width: 80px;
  height: 36px;
  border: none;
  padding: 0;
  line-height: 36px;
}
.cancel {
  background-color: #fbf4f0;
  color: #7e7570;
}
.confirm {
  background-color: #ff6d29;
  color: #fff;
}
</style>
